<template>
	<view class="content">
		<view class="content-page">
			<u-navbar
				left-icon-size="0" 
				title="会员中心" 
				bg-color="#00000000" 
				fixed 
				placeholder 
				:height="navigationBarHeight"
				:title-style="{color: `${textColor}`, fontSize: '16px', fontWeight:700}" 
				v-if="showTitle">
			</u-navbar>
			<view class="header-box">
				<view class="avatar-box flex-b">
					<view class="avatar-info flex-a">
						<image class="avatar-img" src="/static/logo.png"></image>
						<view class="login-btn" @click="() => login()" v-if="!token.exists()">
							立即登录
						</view>
						<view class="info" v-if="userinfo.account_id">
							<view class="text1">
								用户ID
							</view>
							<view class="text2">
								{{ userinfo.account_id }}
							</view>
						</view>
					</view>
					<view class="auth flex-a" @click="clickRealName">
						<image src="/static/auth.svg" style="width: 15px;" mode="widthFix"></image>
						{{userinfo.auth_status || '去实名'}}
						<u-icon name="arrow-right" size="16" color="rgba(0,0,0,0.4)"></u-icon>
					</view>
				</view>
				<view class="balance-box flex-b">
					<image class="mark" src="/static/member-banner-2.png" mode="widthFix" style="width: 114px;"></image>
					<view class="balance-left">
						<view class="text4">
							<image src="/static/money.svg" mode="widthFix" style="width: 12px;"></image>
							账户余额
						</view>
						<view class="num2">
							{{userinfo.balance || '-'}}
						</view>
					</view>
					<view class="balance-right flex-a">
						<view class="btn" @click="clickWithdraw()">
							提现
						</view>
						<view class="btn2" @click="clickWithdrawRecord()">
							记录
						</view>
					</view>
				</view>
				<view class="mask"></view>
			</view>
			<view class="bottom-panel">
				<view class="background"></view>
				<view class="nav-box">
					<view class="nav-title">我的功能</view>
					<view class="nav-items">
						<view class="nav-item" v-for="(item, index) in menus" :key="index"
							@click="clickItem(item)" v-if="!hideItem(item)">
							<image :src="item.icon" mode="widthFix" style="width: 30px;"></image>
							<text class="text5">{{item.label}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<my-tabbar></my-tabbar>
	</view>
</template>

<script>
	import token from '@/utils/token';
	import { userCenter } from '@/api';
	import { customerService } from '@/utils/service';
	import { systemInfo } from '@/utils/mixin';
	import {mapState, mapGetters} from "vuex";
	import { toLogin } from '@/utils';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				token,
				userinfo: {},
				menus: [
					{
						icon: '/static/notify.svg',
						label: '消息通知',
						action() {
							if (token.check()) return;
														
							uni.navigateTo({
								url: '/pages/message/index'
							})
						}
					},
					{
						icon: '/static/order.svg',
						label: '我的订单',
						action() {
							if (token.check()) return;
							
							uni.navigateTo({
								url:'/pages/order/index'
							})
						}
					},
					{
						icon: '/static/bill.svg',
						label: '账单明细',
						action() {
							if (token.check()) return;
							
							uni.navigateTo({
								url:'/pages/bill/index'
							})
						}
					},
					{
						icon: '/static/question.svg',
						label: '常见问题',
						action() {
							uni.navigateTo({
								url:'/pages/faq/index'
							})
						}
					},
					{
						icon: '/static/account.svg',
						label: '账号设置',
						action() {
							if (token.check()) return;
							
							uni.navigateTo({
								url:'/pages/account/index'
							})
						}
					},
					{
						icon: '/static/kefu.svg',
						label: '联系客服',
						action() {
							customerService.openChat()
						}
					},
					{
						icon: '/static/feedback.svg',
						label: '意见反馈',
						action() {
							uni.navigateTo({
								url:'/pages/feedback/index'
							})
						}
					},
					{
						icon: '/static/qualification.svg',
						label: '企业资质',
						action() {
							uni.navigateTo({
								url:'/pages/enterprice/qualification'
							})
						}
					},
					{
						icon: '/static/about.svg',
						label: '关于我们',
						action() {
							uni.navigateTo({
								url:'/pages/aboutus/index'
							})
						}
					},
				]
			}
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			uni.hideTabBar();
			// #endif
			this.getSystemInfo();
		},
		onShow() {
			this.$store.state.tabIndex = 2;
			this.loadUserInfo();
		},
		computed: mapState(['onlineAudit']),
		methods: {
			async loadUserInfo() {
				if (!token.exists()) {
					this.userinfo = {};
					this.$store.state.userinfo = {};
					return;
				}
				
				const res = await userCenter();
				this.userinfo = res.data || {};
				this.$store.state.userinfo = res.data || {};
			},
			hideItem(item) {
				return this.onlineAudit && item.label == '联系客服';
			},
			login() {
				toLogin();
			},
			clickRealName() {
				if (token.check()) return;
				
				uni.navigateTo({
					url: '/pages/real-name/index'
				})
			},
			clickWithdraw() {
				if (token.check()) return;
				
				uni.navigateTo({
					url: '/pages/withdraw/index'
				})
			},
			clickWithdrawRecord() {
				if (token.check()) return;
				
				uni.navigateTo({
					url: '/pages/withdraw/record'
				})
			},
			clickItem(item) {
				item.action.bind(this).call()
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page {
// #ifdef MP-ALIPAY
	background: linear-gradient($main-color 68px, $bg-color);
// #endif
// #ifndef MP-ALIPAY
	background: linear-gradient(90deg, rgba(254, 243, 158, 1) 0%, rgba(255, 223, 32, 1) 100%);
// #endif
	background-repeat: no-repeat;
	background-size: 100% 300px;
	position: relative;
}

.mask {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: linear-gradient(rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 1;
}

.header-box {
	position: relative;
	.avatar-box {
		display: flex;
		align-items: center;
		padding-top: 16px;
		margin-left: 14px;
		
		.avatar-info {
			display: flex;
			align-items: center;
			.avatar-img {
			    width: 62px;
			    height: 62px;
			    border-radius: 50%;
			    margin-right: 15px;
			    position: relative;
			}
			
			.login-btn {
			    width: 78px;
			    height: 26px;
			    line-height: 26px;
			    color: #333;
			    text-align: center;
			    font-size: 14px;
			    border-radius: 26px;
			    background-color: #fff;
			}
			
			.info {
				.text1 {
				    font-size: 14px;
				    font-weight: 400;
				    letter-spacing: 0px;
				    line-height: 16.46px;
				    color: #000;
					margin-top: 3px;
					margin-bottom: 3px;
				}
				
				.text2 {
					font-size: 16px;
					font-weight: 600;
					line-height: 21.95px;
					color: #000;
				}
			}
		}
		.auth {
		    font-size: 12px;
		    font-weight: 500;
		    letter-spacing: 0px;
		    line-height: 16.46px;
		    color: #000;
			display: flex;
			align-items: center;
			gap: 4px;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 16px;
			border-radius: 10px 0px 0px 10px;
			background: $main-color;
		}
	}
	
	.balance-box {
		position: relative;
		z-index: 5;
		margin-top: 16px;
		margin-left: 14px;
		margin-right: 14px;
// #ifdef H5
background-image: url(/h5/static/member-banner.png);
// #endif
// #ifndef H5
background-image: url(/static/member-banner.png);
// #endif
		background-size: 100% 100%;
		border-radius: 20px 20px 0px 0px;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		position: relative;
		padding: 20px 20px 40px 20px;
		
		.mark {
			position: absolute;
			top: 0px;
			right: 0px;
			opacity: 0.2;
			z-index: 0;
		}
		
		.balance-left {
			position: relative;
			
			.text4 {
			    font-size: 12px;
			    font-weight: 400;
			    letter-spacing: 0px;
			    line-height: 16.46px;
			    color: rgba(255, 255, 255, 0.4);
				display: flex;
				gap: 6px;
			}
			
			.num2 {
				margin-top: 5px;
			    font-size: 18px;
			    font-weight: 700;
			    letter-spacing: 0px;
			    line-height: 21.09px;
			    color: rgba(215, 202, 134, 1)
			}
		}
		
		.balance-right {
			position: relative;
			
			.btn {
			    font-size: 12px;
			    font-weight: 500;
				color: var(--text-color);
				padding: 5px 22px;
				border-radius: 27px;
				background: linear-gradient(131.94deg, rgba(218, 204, 127, 1) 0%, rgba(215, 192, 66, 1) 100%);
			}
			
			.btn2 {
			    margin-left: 10px;
				padding: 5px 22px;
			    border-radius: 27px;
			    border: 1px solid rgba(215, 193, 74, 1);
				font-size: 12px;
				font-weight: 500;
				color: rgba(215, 193, 74, 1);
			}
		}
	}
}

.bottom-panel {
	position: relative;
	padding-left: 14px;
	padding-right: 14px;
	
	.background {
		position: absolute;
		left: 0;
		right: 0;
		top: -20px;
		border-radius: 12px 12px 0px 0px;
		background: $bg-color;
		width: 100%;
		height: 160px;
		z-index: 6;
	}
	
	.nav-box {
		position: relative;
		border-radius: 10px;
		background: #fff;
		box-shadow: 0px 8px 16px  rgba(237, 237, 237, 0.25);
		padding-top: 16px;
		z-index: 13;
		
		.nav-title {
			margin-left: 20px;
			font-size: 16px;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 21.95px;
			color: #000;
		}
		
		.nav-items {
			display: flex;
			flex-wrap: wrap;
			margin-top: 16px;
			margin-bottom: 20px;
			
			.nav-item {
				flex: 0 0 33.33333%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 10px 0;
				
				.text5 {
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 19.21px;
					color: #000;
				}
			}
		}
		
		
	}
	
}


</style>
